<template>
	<div class="ArticleDetail">
		<div>
			<div style="margin:1.625rem 0rem;">
				<el-row :gutter="12">
					<el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
						<div class="block">
							<el-avatar shape="square" :size="100" fit="fill" :src="articleItem.link_to"></el-avatar>
						</div>
					</el-col>
					<el-col :xs="21" :sm="21" :md="21" :lg="21" :xl="21" style="vertical-align: bottom;">
						<span>
							<h1 style="text-align: center;">{{articleItem.title}}</h1>
						</span>
						<el-divider></el-divider>
						<span class="text_banner">阅读:{{articleItem.view_count}}</span>
						<el-divider direction="vertical"></el-divider>
						<span class="text_banner">发布:{{articleItem.create_time| formatDate}}</span>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="vertical-align: bottom;margin:1.625rem 0rem;">
						<span> 简介:{{articleItem.summary}}</span>
					</el-col>
				</el-row>
			</div>
			<div class=" ql-snow container">
				<div class="ql-editor" v-html='articleItem.article_content'></div>
			</div>
		</div>
		<div class="tag_style">
			<el-tag type="warning"> 标签：</el-tag>
			<template v-for='item in articleItem.meta_keywords.split(",")'>
				<el-tag style="margin-left: 0.325rem;">{{item}}</el-tag>
			</template>
		</div>
		<div class="footer_style">
			<el-row :gutter="12">
				<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="text-align: center; color:#00FF00;font-weight: bold;">
					<span class="like_span">赞({{like_num}})</span><i :class="like_style()" @click="on_like()"></i>
				</el-col>
				<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" style="text-align: center;font-weight: bold;">
					<span class="present_span">赏</span><i class="el-icon-present present_i" @click="on_money()"></i>
				</el-col>
			</el-row>
		</div>

		<!-- 删除提示框 -->
		<el-dialog title="请博主喝杯咖啡吧" :visible.sync="presentv_isible" width="50rem" center>
			<div><img class="zanshang_xs" src="../../assets/img/zanshang.jpg">
				<img class="zanshang_xs" src="../../assets/img/pay_zanshang.jpg"></div>
		</el-dialog>
	</div>
</template>
<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor,
		// Quill
	} from 'vue-quill-editor';
	import * as Quill from 'quill' //引入编辑器
	import bus from '../common/bus';
	import {
		constHelp
	} from '../common/contant';
	import common from '../common/common.js'
	export default {
		name: 'ArticleDetail',
		data() {
			return {
				'ArticleDetail': '',
				articleItem: {},
				url: {
					select_article: constHelp['WEBAPIURL'] + '/blogManage/select_article', //获取文章数据
					update_article_like: constHelp['WEBAPIURL'] + '/blogManage/update_article_like', //获取文章数据
				},
				like_flage: true,
				like_num: 0,
				presentv_isible: false,
			}
		},
		metaInfo: {
			title: '自由的个人博客', // set a title
			meta: [{ // set meta
				name: '自由的个人博客,技术学习,在线工具,素材收集,文章浏览,java面试题，python全栈',
				content: '自由的个人博客，向往自由，希望自己的梦想可以实现，平凡的生活，在技术的海洋里让梦想启航。'
			}],
			link: [{ // set link
				rel: 'asstes',
				href: 'http://www.mxdqh.top/'
			}]
		},
		created() {
			this.init();
		},
		computed: {
			like_style: function() {
				return function() {
					if (this.like_flage) {
						return "el-icon-star-off like_i";
					} else {
						return "el-icon-star-on like_i";
					}
				}
			},
		},
		filters: {
			formatDate(time) {
				var date = common.IsNull(time) ? new Date() : new Date(time);
				return common.formatDate(date, 'yyyy-MM-dd');
			},
		},
		methods: {
			// 初期化数据
			init() {
				this.$axios.post(this.url.select_article, {
					article_id: this.$route.query.article_id
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.articleItem = res.data.data;
						this.like_num = this.articleItem.article_like_num
						let storage_like_article_ids = localStorage.getItem("like_article_ids")
						if (!common.IsNull(storage_like_article_ids) && JSON.parse(storage_like_article_ids).indexOf(this.articleItem.article_id) >
							-1) {
							this.like_flage = false
						} else {
							this.like_flage = true
						}
						if (common.IsNull(this.articleItem.link_to)) {
							// debugger
							this.articleItem.link_to = "https://mxdqh.top:8080/static/book12.jpg"
						}
					}
				})
			},
			// 点赞
			on_like() {
				let storage_like_article_ids = localStorage.getItem("like_article_ids")
				if (!common.IsNull(storage_like_article_ids) && JSON.parse(storage_like_article_ids).indexOf(this.articleItem.article_id) >
					-1) {
					this.like_flage = false
					this.$message({
						message: '您已经点过赞了!',
						type: 'success'
					});
				} else {
					let like_article_ids = [];
					like_article_ids.push(this.articleItem.article_id)
					localStorage.setItem("like_article_ids", JSON.stringify(like_article_ids));
					this.like_num += 1
					this.like_flage = false
					this.articleItem.article_like_num = this.like_num
					this.$axios.post(this.url.update_article_like, this.articleItem, {
						withCredentials: true
					}).then((res) => {
						if (res.data.err == "0") {
							this.init();
						}
					})
				}
			},
			// 赞赏
			on_money() {
				this.presentv_isible = true
			}
		}
	}
</script>

<style>
	.ArticleDetail {
		width: 100%;
	}

	.tag_style {
		/* font-size: 10pt;
		height: 100%;
		;
		vertical-align: middle; */
		/* width: 100%; */
		/* height: 5.625rem; */
		/* footer的高度一定要是固定值*/
		/* position: absolute; */
		bottom: 0.625rem;
		margin: 0.625rem;
	}

	.footer_style {
		/* 		font-size: 2.25rem;
		color: red; */
		bottom: 0.625rem;
		margin: 2.625rem 0.625rem;
		font-size: 1.45rem;
	}

	.present_span,
	.present_i {
		color: red;
	}

	.like_span,
	.like_i {
		color: red;
	}

	.like_i:hover,
	.present_i:hover {
		/* box-shadow: 2px 5px 6px #EBEEF5; */
		transform: scale(0.2);
		-webkit-transform: scale(1.35);
		-moz-transform: scale(1.35);
		-o-transform: scale(1.35);
		-ms-transform: scale(1.35);
	}

	.like_i {
		color: red;
	}

	.zanshang_xs {
		/* display: block; */
		width: 15.5rem;
		height: 15.5rem;
		margin-left: 6.25rem;
		border-radius: 10%;
	}

	.text_banner {
		color: #999999;
		font-size: large;
	}


	/* 图片div */
	.icon-div {
		min-height: 5rem;
		min-width: 5rem;
		/* position: absolute; */
	}

	.icon-img {
		height: 4rem;
		width: 4rem;
		/* border: 0.0625rem solid #666666; */
	}
</style>
